<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日微醺吧 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f7f7f7;
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        .card-image {
            height: 150px;
            object-fit: cover;
            width: 100%;
            transition: transform 0.3s ease;
        }
        
        .card:hover .card-image {
            transform: scale(1.02);
        }
        
        .card-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .search-bar {
            background-color: #f0f0f0;
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <h1 class="text-lg font-medium">今日微醺吧</h1>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area p-4">
        <!-- 搜索栏 -->
        <div class="search-bar mb-4">
            <i class="fas fa-search text-gray-400 mr-2"></i>
            <span class="text-gray-400 text-sm">搜索你喜欢的特调</span>
        </div>
        
        <!-- 轮播图 -->
        <div class="card mb-5">
            <div class="relative overflow-hidden rounded-lg">
                <img src="https://images.unsplash.com/photo-1551024709-8f23befc6f87?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80" 
                     alt="Banner" class="w-full h-40 object-cover">
                <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent">
                    <p class="text-white font-medium">探索微醺世界，尽在指尖</p>
                </div>
            </div>
        </div>
        
        <!-- 经典特调卡片 -->
        <div class="card relative mb-5">
            <div class="overflow-hidden">
                <img src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80" 
                     alt="经典特调" class="card-image">
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold mb-2">经典特调 🍸</h2>
                <p class="text-gray-600">探索世界知名的经典鸡尾酒配方，感受传统调酒艺术</p>
            </div>
            <div class="card-icon">
                <i class="fas fa-glass-martini-alt text-yellow-500"></i>
            </div>
        </div>
        
        <!-- 风味特调卡片 -->
        <div class="card relative mb-5">
            <div class="overflow-hidden">
                <img src="https://images.unsplash.com/photo-1536935338788-846bb9981813?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80" 
                     alt="风味特调" class="card-image">
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold mb-2">风味特调 🍹</h2>
                <p class="text-gray-600">根据口味喜好，发现专属于你的独特风味特调</p>
            </div>
            <div class="card-icon">
                <i class="fas fa-cocktail text-pink-500"></i>
            </div>
        </div>
        
        <!-- 基酒选择卡片 -->
        <div class="card relative mb-5">
            <div class="overflow-hidden">
                <img src="https://images.unsplash.com/photo-1549499090-c9203d2b20ad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80" 
                     alt="基酒选择" class="card-image">
            </div>
            <div class="p-4">
                <h2 class="text-xl font-bold mb-2">基酒选择 🥃</h2>
                <p class="text-gray-600">了解各种基酒特性，挑选适合你的酒基</p>
            </div>
            <div class="card-icon">
                <i class="fas fa-wine-bottle text-blue-500"></i>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active">
            <i class="fas fa-home tab-icon"></i>
            <span>首页</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-glass-cheers tab-icon"></i>
            <span>制作特调</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-user tab-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 